<template>
  <div>
    <van-tabbar v-model="active" route v-show="navShow($route.path)">
      <van-tabbar-item
        v-for="item in navList"
        :name="item.name"
        :icon="item.icon"
        :key="item.name"
        :to="item.path"
        >{{ item.title }}</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "Home",
      currentPath: "/home",
      navList: [
        {
          title: "首页",
          icon: "wap-home-o",
          path: "/home",
          name: "Home",
        },
        {
          title: "分类",
          icon: "hot-o",
          path: "/sort",
          name: "Sort",
        },
        {
          title: "消息",
          icon: "comment-o",
          path: "/message",
          name: "Message",
        },
        {
          title: "购物车",
          icon: "shopping-cart-o",
          path: "/cart",
          name: "Cart",
        },
        {
          title: "我的",
          icon: "manager-o",
          path: "/mine",
          name: "Mine",
        },
      ],
    };
  },

  components: {},
  watch: {
    $route: {
      deep: true,
      handler(val) {
        // 监听路由变化，方便高亮处理
        console.log("nav组件的路由监听：", val);
        this.currentPath = val.path;
      },
    },
  },
  methods: {
    navShow(path) {
      console.log("当前组件：", path);
      if (path == "/message" || path == "/reg" || path == "/detail") {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
</style>
